<template>
  <div>
    <!-- 头部开始 -->
    <div class="header">
      智慧城市大气环境监测系统
    </div>
    <!-- 头部结束 -->
    <!-- 体部开始 -->
    <div class="content">
      <!-- 上半部分 -->
      <div class="content_top">
        <!-- 上半部分左边  1-->
        <div class="content_top_left">
          <div class="charts">
            <Box title="实时温度曲线">
              <!-- 使用组件 -->
              <template #content>
                <Left1></Left1>
              </template>
            </Box>
          </div>
          <div class="charts">
            <Box title="设备状态分布">
              <!-- 使用组件 -->
              <template #content>
                <Left2></Left2>
              </template>
            </Box>
          </div>
        </div>
        <!-- 上半部分中间 2-->
        <div class="content_top_center">
          <Map></Map>
        </div>
        <!-- 上半部分右边 1-->
        <div class="content_top_right">
          <div class="charts">
            <Box title="实时颗粒物pm10柱状图">
              <!-- 使用组件 -->
              <template #content>
                <Right1></Right1>
              </template>
            </Box>
          </div>
          <div class="charts">
            <Box title="实时颗粒物饼图">
              <!-- 使用组件 -->
              <template #content>
                <Right2></Right2>
              </template>
            </Box>
          </div>
        </div>
      </div>
      <!-- 下半部分 -->
      <div class="content_bottom">
        <div class="charts">
          <Box title="服务状态概览">
            <!-- 使用组件 -->
            <template #content>
              <Bottom1></Bottom1>
            </template>
          </Box>
        </div>
        <div class="charts">
          <Box title="监测点信息">
            <!-- 使用组件 -->
            <template #content>
              <Bottom2></Bottom2>
            </template>
          </Box>
        </div>
        <div class="charts">
          <Box title="监测月报">
            <!-- 使用组件 -->
            <template #content>
              <Bottom3></Bottom3>
            </template>
          </Box>
        </div>
        <div class="charts">
          <Box title="监测视频">
            <!-- 使用组件 -->
            <template #content>
              <Bottom4></Bottom4>
            </template>
          </Box>
        </div>
      </div>
    </div>
    <!-- 体部结束 -->
  </div>
</template>
<script>
// 引入Left1页面
import Left1 from '@/pages/government/components/Left1.vue'
import Left2 from '@/pages/government/components/Left2.vue'
import Right1 from '@/pages/government/components/Right1.vue'
import Right2 from '@/pages/government/components/Right2.vue'
import Bottom1 from '@/pages/government/components/Bottom1.vue'
import Bottom2 from '@/pages/government/components/Bottom2.vue'
import Bottom3 from '@/pages/government/components/Bottom3.vue'
import Bottom4 from '@/pages/government/components/Bottom4.vue'
import Map from '@/pages/government/components/Map.vue'
// 引入Box页面
import Box from '@/components/Box.vue'
export default {
  // 将Left1页面注册成为组件
  components: {
    Left1,
    Map,
    Box,
    Left2,
    Right1,
    Right2,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4
  },
  data() {
    return {

    }
  },
}
</script>
<style lang="scss">
// 头部样式
.header {
  height: 60px;
  background-image: url(../../assets/layout/header.png);
  background-size: 100% 200px;
  // 字体大小
  font-size: 28px;
  color: white;
  // 文字居中
  text-align: center;
}

// 体部样式
.content {
  // viewHeight  1px em rem 默认1em/1rem =16px
  height: calc(100vh - 60px);
  display: flex;
  // 更改主轴排列方向
  flex-direction: column;

  // 上半部分
  .content_top {
    flex: 2;
    display: flex;

    .content_top_left,
    .content_top_right {
      flex: 1;
      display: flex;
      flex-direction: column;

      .charts {
        flex: 1;
      }
    }

    .content_top_center {
      flex: 2;
      background-image: url(../../assets/layout/chart_center_box_bg.png);
      background-size: 100% 100%;
      padding: .5em;
      margin-bottom: .5em;
    }

  }

  // 下半部分
  .content_bottom {
    flex: 1;
    display: flex;

    .charts {
      flex: 1;
    }
  }
}

// 给图标设置样式
.charts {
  background-image: url(../../assets/layout/chart_box_bg.png);
  background-size: 100% 100%;
  padding: .5em;
  // 上右 下左
  margin: 0 0.5rem 0.5em 0.5em;
}</style>